<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<link href="../css/table.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.8.3.min.js"></script>
<script>
var rows={'cid':'编号','cust':'客户','cuser':'操作员','type':'服务类型','style':'服务方式','effect':'服务效果','ctime':'创建时间'};
var data =[];
var pageSize = 10;
var pageCount = 0;
var pageIndex =1;
var rowCount=0;

		$(function(){
			loadPage();
			$('#pageSize_num').change(function(){
				pageIndex=1;
				pageSize=$('#pageSize_num').val();
				if(pageSize<1 || isNaN(pageSize)){
					pageSize=1;
					$('#pageSize_num').val('1');
				}
				loadPage();	
			});
		});
		
		function reg(){
			$('#nextPage').click(function(){
				pageIndex=pageIndex+1;	
				loadPage();
			});
			$('#upPage').click(function(){
				pageIndex=pageIndex-1;	
				loadPage();
			});	
			$('.page_').click(function(){
				if(!isNaN(this.id)){
					pageIndex=this.id;
					loadPage();
				}
			});
		}
		
		function loadPage(){
			$.post('showCustService.action',{'currPage':pageIndex,'pageSize':pageSize},function(res){
				data=res.data;
				pageSize=res.pageSize;
				pageCount=res.pageCount;
				pageIndex=res.currPage;
				rowCount=res.rowCount;
				loadTable();
			},'json');	
		}
		
		function loadTable(){
				$('#ttitle').html('');
				for(var key in rows){
					$('#ttitle').append('<td>'+rows[key]+'</td>');
				}
				$('#ttitle').append('<td>操作</td>');
				$('#tbody').html('');
				
				for(var i=0;i<data.length;i++){
					var ttr ='<tr>';
					for(var key in rows){
						ttr+='<td>'+data[i][key]+'</td>';
					}
					ttr+='<td><a href=getCustService.action?id='+data[i].cid+'>修改</a>  &nbsp;&nbsp;  <a href="deleteCustService.action?id='+data[i].cid+'">删除</a></td>';
					$('#tbody').append(ttr+'</tr>');
					
				}
				loadPageNumber();
		}
		
		function loadPageNumber(){
			var start =1;
			var end = pageCount;
			$('#pageIndex').html('');
			if(pageIndex>1){
				$('#pageIndex').append('<div class="page_" id="upPage">上一页</div>');
			}
			if(pageCount>9 && pageIndex>9){
				var start = pageIndex-4;
			}
			if(pageCount>(pageIndex+4)){
				 end = pageIndex+4;
			}else{
				end =pageCount;	
			}
			
			for(var i=start;i<=end;i++){
				if(pageIndex==i){
					$('#pageIndex').append('<div class="page_sel" title="当前页">'+i+'</div>');
				}else{
					$('#pageIndex').append('<div id="'+i+'" class="page_" title="第'+i+'页">'+i+'</div>');
				}
			}
			
			if(pageIndex<pageCount){
				$('#pageIndex').append('<div class="page_" id="nextPage">下一页</div>');
			}
			
			$('#page_info').html('共'+rowCount+'条  每页'+pageSize+'条 当前'+pageIndex+'/'+pageCount+'页');
			reg();
		}

</script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead id="head">
  <tr id="ttitle">
  </tr>
</thead>
<tbody id="tbody">
</tbody>
</table>

<div id="page_index">
  <div id="page_info">共[10]条记录 每页5条 共2页</div>
  <div id="pageIndex"> 
    <div class="page_">1</div>
  </div>
  <div id="setPage">每页
    <label for="pageSize_num"></label>
    <input name="pageSize_num" type="text" id="pageSize_num" value="10" size="4" maxlength="4" />
  条</div>
</div>
</body>
</html>
